<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>CUSTOM COMPONENTS INLINE TEST</title>
    <script type="text/javascript" src="../../dist/index.web.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/javascript">
      const JXM = {
        main:{
          props:{
            key:1
          },
          children:[
            {genFunc:{props:{title:'generated function'}}},
            {genClass:{props:{title:'generated class',status:'looks good'}}},
            { component:'MyLib.CompA',},
            { component:'MyLib.CompB',},
            { component:'MyLib.CompC',},
            {div:'components from inserting functions'},
            {
              component:'div',
              props:{
                testProp:'should be passed'
              },
              passprops:true,
              debug:true,
              __dangerouslyInsertFunctionComponents:{
                children:{
                  functionBody:'console.log("called invoked function")',
                  reactComponent:{
                    component:'span',
                    children:'from func',
                  },
                  options:{
                    name:'spanFunc'
                  },
                  invoke:true,
                }
              },
            },
          ]
        }
      }
      const boundConfig = {
        debug:true,
        customComponents:[
          {
            type: 'function',
            name: 'genFunc',
            functionBody:'console.log("called generated function")',
            jsonx:{
              component:'span',
              children:'gen custom',
            },
            options:{
              name:'genFun'
            }
          },
          {
            type: 'component',
            name: 'genClass',
            jsonx:{
              componentDidMount: {
                body: 'console.log(\'mounted\',this.props)',
                arguments: [],
              },
              render: {
                body: {
                  component: 'p',
                  children: [
                    {
                      component: 'span',
                      children: 'My Custom React Component Status: ',
                    },
                    {
                      component: 'span',
                      thisprops: {
                        children: ['status',],
                      },
                    },
                  ],
                },
              },
            },
            options:{
              name:'genClass'
            }
          },
          {
            type:'library',
            name:'MyLib',
            jsonx:{
              CompA:{
                name:'CompA',
                type:'function',
                functionBody:'console.log("called generated function")',
                jsonxComponent:{
                  component:'div',
                  children:'gen lib function comp a',
                },
                options:{
                  name:'CompA'
                }
              },
              CompB:{
                name:'CompB',
                type:'function',
                jsonxComponent:{
                  component:'div',
                  children:'gen lib function comp b',
                },
                options:{
                  name:'CompB'
                }
              },
              CompC:{
                type: 'component',
                name: 'CompC',
                jsonxComponent:{
                  componentDidMount: {
                    body: 'console.log(\'mounted CompC\',this.props)',
                    arguments: [],
                  },
                  render: {
                    body: {
                      component: 'div',
                      children: 'CompC Class Component',
                    },
                  },
                },
                options:{
                  name:'genClass'
                }
              }
            }
          }
        ]
      };
      jsonx.jsonxRender.call(boundConfig,{ 
        jsonx: JXM, 
        querySelector:'#root', });
    </script>
  </body>
</html>